<template>
  <el-card class="monitor-card" :class="{ 'animate-pulse': loading }">
    <template #header>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold">JVM状态</span>
        <div>
          <el-tag type="info" size="small">{{ data.name }}</el-tag>
          <el-tag class="ml-2" size="small">{{ data.version }}</el-tag>
        </div>
      </div>
    </template>
    
    <el-skeleton :loading="loading" animated :rows="6">
      <template #default>
        <!-- 堆内存使用 -->
        <div class="mb-4">
          <div class="flex justify-between mb-1">
            <span class="text-sm">堆内存 ({{ data.memoryUsage.toFixed(1) }}%)</span>
            <span class="text-sm">
              {{ formatBytes(data.heapUsed) }}/{{ formatBytes(data.heapMax) }}
            </span>
          </div>
          <el-progress 
            :percentage="data.memoryUsage" 
            :color="getHeapColor(data.memoryUsage)"
            :stroke-width="16"
          />
        </div>
        
        <!-- 线程信息 -->
        <div class="grid grid-cols-2 gap-4 mb-4">
          <div class="bg-gray-100 dark:bg-gray-800 rounded p-2 text-center">
            <div class="text-2xl font-bold">{{ data.threadCount }}</div>
            <div class="text-xs text-gray-500">活动线程</div>
          </div>
          <div class="bg-gray-100 dark:bg-gray-800 rounded p-2 text-center">
            <div class="text-2xl font-bold">{{ data.daemonThreadCount }}</div>
            <div class="text-xs text-gray-500">守护线程</div>
          </div>
        </div>
        
        <!-- 类加载信息 -->
        <div class="grid grid-cols-3 gap-2 text-center">
          <div>
            <div class="text-lg font-bold">{{ data.loadedClassCount }}</div>
            <div class="text-xs text-gray-500">已加载类</div>
          </div>
          <div>
            <div class="text-lg font-bold">{{ data.totalLoadedClassCount }}</div>
            <div class="text-xs text-gray-500">总加载类</div>
          </div>
          <div>
            <div class="text-lg font-bold">{{ data.unloadedClassCount }}</div>
            <div class="text-xs text-gray-500">已卸载类</div>
          </div>
        </div>
        
        <!-- 运行时间 -->
        <div class="mt-4 text-center text-sm">
          <el-tag type="info">
            运行: {{ formatUptime(data.runTime) }}
          </el-tag>
        </div>
      </template>
    </el-skeleton>
  </el-card>
</template>

<script setup lang="ts">
import type { GetJvmInfoRes } from '@/api/monitor/types';

defineProps<{
  data: GetJvmInfoRes;
  loading: boolean;
}>();

// 字节格式化
const formatBytes = (bytes: number): string => {
  if (bytes <= 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 运行时间格式化
const formatUptime = (millis: number): string => {
  const seconds = Math.floor(millis / 1000);
  const days = Math.floor(seconds / (3600 * 24));
  const hours = Math.floor((seconds % (3600 * 24)) / 3600);
  const mins = Math.floor((seconds % 3600) / 60);
  return `${days}d ${hours}h ${mins}m`;
};

// 堆内存颜色
const getHeapColor = (usage: number) => {
  return usage > 90 ? '#f56c6c' : usage > 70 ? '#e6a23c' : '#67c23a';
};
</script>

<style lang="scss" scoped>
.monitor-card {
  .el-progress {
    margin-bottom: 12px;
  }
}
</style>